<template>
  <div class="search-popup">
    <van-popup
      :value="value"
      closeable
      position="right"
      :style="{ height: '100%', width: '75%', top: '56%' }"
      :overlay-style="{ top: '6%' }"
      @input="updateValue($event.target.value)"
      @click-overlay="closePop"
      @click-close-icon="closePop"
    >
      <div class="pop-content">
        <div class="hd">
          <h2>排序</h2>
        </div>
        <van-divider style="margin:20px 0" />
        <div class="bd">
          <div class="row-area">
            <p class="row-title">排序方式</p>
            <div class="sec-sort-area">
              <van-button :type="sort.btnStyle1" @click="changeTop" style="width:120px;margin:0 10px 0 0"
                >正序</van-button
              >
              <van-button :type="sort.btnStyle2" @click="changeBottom" style="width:120px"
                >倒序</van-button
              >
            </div>
          </div>
          <div class="row-area">
            <p class="row-title">排序属性</p>
            <div class="sec-sort-area">
              <van-button :type="sort2.btnStyle3" @click="changeName" style="width:120px;margin:0 10px 0 0"
                >客户名称</van-button
              >
              <van-button :type="sort2.btnStyle4" @click="changeTime" style="width:120px"
                >创建时间</van-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="btm-area pub-btm-area">
      <span class="btn-reset" @click="reset">重置</span>
      <span class="btn-confirm"  style="border:none;margin:0;padding:0" @click = "setSort">确定</span>
    </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "SearchPopup",
  props: ["value"],
  data() {
    return {
      sortData: {
        isAsc: false,
        columns: "createTime",
      },
      sort: {
        btnStyle1: "default",
        btnStyle2: "default",
      },
      sort2: {
        btnStyle3: "default",
        btnStyle4: "default",
      },
    };
  },
  methods: {
    changeTop() {
      this.sortData.isAsc = true;
      this.sort.btnStyle1 = "info";
      this.sort.btnStyle2 = "default";
    },
    changeBottom() {
      this.sortData.isAsc = false;
      this.sort.btnStyle2 = "info";
      this.sort.btnStyle1 = "default";
    },
    changeName() {
      this.sortData.columns = "companyName";
      this.sort2.btnStyle3 = "info";
      this.sort2.btnStyle4 = "default";
    },
    changeTime() {
      this.sortData.columns = "createTime";
      this.sort2.btnStyle4 = "info";
      this.sort2.btnStyle3 = "default";
    },
    closePop() {
      this.$emit("close-pop");
    },
    setSort(){
      this.$emit("set-sort",this.sortData);
    },
    updateValue(value) {
      this.$emit("input", value);
    },
    reset(){
      this.sortData = {
        isAsc: false,
        columns: "createTime",
      }
      this.sort = {
        btnStyle1: "default",
        btnStyle2: "default",
      }
      this.sort2 = {
        btnStyle3: "default",
        btnStyle4: "default",
      }
    }
  }
};
</script>
<style lang="scss" scoped>

.search-popup {
  h2{
    margin:0;
    padding:0;
    font-size: 16px;
  }
  .pop-content {
    .hd {
    padding: 20px 0 0 20px;
    }
    .bd {
      padding:0px 20px 0px 20px;
      .row-area{
        margin-bottom: 20px;
      }
      .row-title{
        font-size: 16px;
        margin:0 0 10px 0;
      }
    }
  }
  .btm-area {
    position: fixed;
    bottom: 57px;
    left: 0px;
    width: 100%;
    border-top: 1px solid #efefef;
    display: flex;
    height: 49px;
    line-height: 49px;
    background: #ffffff;
    .btn-reset {
      text-align: center;
      flex: 1;
      font-size: 16px;
      color: #3875f6;
      cursor: pointer;
    }
    .btn-confirm {
      text-align: center;
      font-size: 16px;
      color: #fff;
      background: #3875f6;
      flex: 1;
      cursor: pointer;
    }
  }
}
</style>
